<!DOCTYPE html>
<html>
<head>
  <!-- 页面meta -->
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>传智健康</title>
  <meta name="description" content="传智健康">
  <meta name="keywords" content="传智健康">
  <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
  <!-- 引入样式 -->
  <link rel="stylesheet" href="../css/style.css">
  <script src="../plugins/Echarts/echarts.js"></script>
</head>
<body class="hold-transition">
<div id="app">
  <div class="content-header">
    <h1>统计分析<small>套餐占比</small></h1>
    <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>统计分析</el-breadcrumb-item>
      <el-breadcrumb-item>套餐占比</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
  <div class="app-container">
    <div class="box">
      <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
      <div id="chart1" style="height:600px;"></div>
    </div>
  </div>
</div>
</body>
<!-- 引入组件库 -->
<script src="../js/vue.js"></script>
<script src="../js/axios-0.18.0.js"></script>
<script type="text/javascript">
  // 基于准备好的dom，初始化echarts实例
  var myChart1 = echarts.init(document.getElementById('chart1'));

  axios.get("/Report/SetMealReport").then((resp) => {
    myChart1.setOption({
      /*title: {
        text: '套餐预约占比',
        subtext: '',
        x: 'center'
      },
      tooltip: {//提示框组件
        trigger: 'item',//触发类型，在饼形图中为item
        formatter: "{a} <br/>{b} : {c} ({d}%)"//提示内容格式
      },
      legend: {
        orient: 'vertical',
        left: 'left',
        data: res.data.data.setmealNames
      },
      series: [
        {
          name: '套餐预约占比',
          type: 'pie',
          radius: '55%',
          center: ['50%', '60%'],
          data: res.data.data.setmealCount,
          itemStyle: {
            emphasis: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]*/
      title: {
        text: '套餐占比',
        subtext: '实时数据',
        left: 'center'
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        left: 'left'
      },
      series: [
        {
          name: 'Access From',
          type: 'pie',
          radius: '50%',
          data: resp.data.data,/*[
            { value: 666, name: 'Search Engine' },
            { value: 735, name: 'Direct' },
            { value: 580, name: 'Email' },
            { value: 484, name: 'Union Ads' },
            { value: 300, name: 'Video Ads' }]*/
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    });
  }).catch((r)=>{
      this.showMessage(r);
  });
    //权限不足提示
    function showMessage(r) {
      if(r == 'Error: Request failed with status code 403'){
        //权限不足
        alert("您暂时没有权限查看，请联系管理员");
        //this.$message.error('您暂时没有权限查看，请联系管理员');
        return;
      }else{
        //this.$message.error('未知错误');
        alert("未知错误...")
        return;
      }
    }
    // 使用刚指定的配置项和数据显示图表。
    myChart1.setOption(option);
</script>
</html>
